<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<script src="js/jquery.min.2.1.1.js"></script>
		<script src="js/ajax.js"></script>
		
		<style>
		
			table{
				
				/* border: 1px solid red; */
				margin: 200px auto;
				width: 400px;
				height: 200px;
			}
			
			table td{
				/* border: 1px solid blue; */
			}
			
			.mh{
				
				width: 220px;
				height: 20px;
				margin-left: 20px;
			}
			
			input[type="button"]{
				margin-left: 30px;
			}
			
			#row1 td{
				border-top: 1px solid red;
				border-left: 1px solid red;
				border-right: 1px solid red;
			}
			
			.c2{
				border-left: 1px solid red;
			}
			
			.bottom{
				border-bottom: 1px solid red;
			}
			
			.c3{
				border-right: 1px solid red;
			}
		</style>
	</head>
	<body>
		
		<table cellpadding="0" cellspacing="0">
			
			<tr id="row1" >
				<td colspan="2" align="center">图书借阅系统</td>
			</tr>
			
			<tr >
				<td class="c2" align="right">
					登陆账号：
				</td>
				<td class="c3">
					<input class="mh" id="userCode" value="wanghua" />
				</td>
			</tr>
			<tr>
				<td class="c2" align="right">
					登陆密码：
				</td>
				<td class="c3">
					<input class="mh" type="password" id="password" value="123456" />
				</td>
			</tr>
			<tr>
				<td class="c2 bottom c3" colspan="2" align="center">
					<input type="button" value="登陆" id="login"  />
					<input type="button" value="注册用户" />
				</td>
			</tr>
		</table>
		
		<script>
			
			
			// bind 表示绑定 绑定1个事件  比如绑定1个单击事件
			// 在JS的语法中  单击 onclick 在jQuery中  同样的事件需要去掉on
			//  onclick --> click
			//  onfocus --> focus
			$('#login').bind('click',function(){
				
				
				//1 拿到账号和密码
				var userCode= $('#userCode').val();
				var password= $('#password').val();
				
				
				
				//2 往后台发送请求  [user/login]
				
				//url,method,data,callback
				
				//1 url 请求的后台接口
				var url=getRoot()+"user/login";
				
				//2 method 请求的方法
				var method="POST";
				
				//3 data 前台要往后台发送的数据 JSON对象 {}
				var data={
					
					// 重点：JSON对象的key要和后台的属性一样 [ private String userCode;]
					'userCode':userCode,
					'password':password
				}
				
				//4 callback 回调函数 如果后台不返回 就执行 如果后台返回就会执行
				
				// 后台返回的数据保存在backData形参中
				// 语法：在形参中的变量不需要加var 
				var callback=function(backData){
					console.log(backData);
					
					var code = backData.code;
					if(code === '200'){
						
						// 拿到登陆的用户
						var userCode= $('#userCode').val();
						
						// 把当前用户放到本地缓存中
						window.localStorage.setItem("userCode",userCode);
						
						//3 如果登陆成功 跳转到首页 index.html
						window.location.href="index.html";
						
						
						
					}else{
						//4 如果登陆失败 还是在这个页面 弹框提示用户登陆失败
						alert("登陆失败");
					}
				}
				
				
				send(url,method,data,callback);
				
			})
		
		</script>
	</body>
</html>
